<template>
  <view class="profile-page">
    <!-- 顶部栏 -->
    <view class="page-header">
      <text class="page-title">我的</text>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-info-section">
      <view class="user-card">
        <view class="user-avatar-wrapper">
          <image class="user-avatar" :src="avatarUrl" mode="aspectFill" @error="handleAvatarError"></image>
        </view>
        <view class="user-detail">
          <text class="user-name">{{ userInfo.name || '未登录' }}</text>
          <text class="user-phone">{{ userInfo.phone || '点击登录' }}</text>
        </view>
        <view class="settings-icon" @tap="navigateTo('/pages/profile/settings/index')">
          <text class="iconfont">&#xe681;</text>
        </view>
      </view>
    </view>
    
    <!-- 服务记录 -->
    <view class="profile-container">
      <view class="service-section">
        <view class="section-title">服务记录</view>
        <view class="service-grid">
          <view class="service-item" @tap="navigateTo('/pages/profile/nursing-home-appointments/index')">
            <view class="service-icon">
              <text class="iconfont">&#xe614;</text>
            </view>
            <text class="service-name">养老院预约记录</text>
          </view>
          <view class="service-item" @tap="navigateTo('/pages/profile/charity-registrations/index')">
            <view class="service-icon">
              <text class="iconfont">&#xe601;</text>
            </view>
            <text class="service-name">公益活动报名</text>
          </view>
        </view>
      </view>
      
      <!-- 功能列表 -->
      <view class="feature-list">
        <view class="section-title">常用功能</view>
        
        <view class="feature-grid">
          <!-- 第一排 -->
          <view class="feature-row">
            <view class="feature-card" @tap="navigateTo('/pages/profile/reviews/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #e0f2f1, #b2dfdb);">
                <text class="iconfont">&#xe63a;</text>
              </view>
              <text class="card-name">我的评价</text>
            </view>
            
            <view class="feature-card" @tap="navigateTo('/pages/profile/favorites/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #fff8e1, #ffecb3);">
                <text class="iconfont" style="color: #e67e22;">&#xe715;</text>
              </view>
              <text class="card-name">我的收藏</text>
            </view>
          </view>
          
          <!-- 第二排 -->
          <view class="feature-row">
            <view class="feature-card" @tap="navigateTo('/pages/profile/feedback/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb);">
                <text class="iconfont" style="color: #2196f3;">&#xe680;</text>
              </view>
              <text class="card-name">我的反馈</text>
            </view>
            
            <view class="feature-card" @tap="navigateTo('/pages/profile/settings/index')">
              <view class="card-icon" style="background: linear-gradient(135deg, #f5f5f5, #e0e0e0);">
                <text class="iconfont" style="color: #607d8b;">&#xe681;</text>
              </view>
              <text class="card-name">设置</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 关于我们 -->
      <view class="about-section">
        <view class="about-item" @tap="navigateTo('/pages/profile/about')">
          <text class="about-text">关于我们</text>
          <text class="item-arrow iconfont">&#xe6a3;</text>
        </view>
      </view>
      
      <!-- 退出登录按钮 -->
      <button class="logout-btn" @tap="handleLogout" v-if="isLoggedIn">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import useAuthCheck from '../../utils/authCheck';

// 引入权限校验
const { checkAuth } = useAuthCheck();

// 用户头像
const avatarUrl = ref('../../image/R.jpg');
// 登录状态
const isLoggedIn = ref(false);
// 用户信息
const userInfo = reactive({
  name: '',
  phone: ''
});

// 页面加载时执行
onMounted(() => {
  // 检查登录状态
  if (checkAuth()) {
    // 已登录，可以执行其他初始化操作
    isLoggedIn.value = true;
    loadUserInfo();
    loadUserAvatar();
  }
});

// 加载用户信息
const loadUserInfo = () => {
  const userInfoStr = uni.getStorageSync('userInfo');
  if (userInfoStr) {
    try {
      const info = JSON.parse(userInfoStr);
      userInfo.name = info.name || '康怡用户';
      userInfo.phone = info.phone || '未绑定手机';
    } catch (error) {
      console.error('解析用户信息失败:', error);
    }
  }
};

// 加载用户头像
const loadUserAvatar = () => {
  const avatarPath = uni.getStorageSync('userAvatar');
  if (avatarPath) {
    avatarUrl.value = avatarPath;
  }
};

// 导航到指定页面
const navigateTo = (path) => {
  if (!isLoggedIn.value) {
    // 未登录则跳转到登录页
    uni.navigateTo({
      url: '/pages/login/index'
    });
    return;
  }
  
  uni.navigateTo({
    url: path
  });
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除缓存中的登录信息
        uni.removeStorageSync('token');
        uni.removeStorageSync('userInfo');
        
        // 更新状态
        isLoggedIn.value = false;
        userInfo.name = '';
        userInfo.phone = '';
        
        // 提示用户已退出
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        });
      }
    }
  });
};

// 处理头像加载错误
const handleAvatarError = () => {
  avatarUrl.value = '../../image/R.jpg';
};
</script>

<style lang="scss">
page {
  background-color: #f8f9fa;
  min-height: 100%;
}

.profile-page {
  min-height: 100%;
  padding-bottom: 50px; /* 为tabBar预留空间 */
  
  // 顶部标题栏样式
  .page-header {
    position: relative;
    z-index: 10;
    padding: 15px 20px;
    background-color: #2c7873;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    .page-title {
      font-size: 18px;
      color: #ffffff;
      font-weight: 600;
    }
  }
  
  // 用户信息卡片
  .user-info-section {
    padding: 15px 20px;
    background-color: #2c7873;
    padding-bottom: 30px;
    
    .user-card {
      background-color: #fff;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      position: relative;
      
      .user-avatar-wrapper {
        margin-right: 15px;
        
        .user-avatar {
          width: 60px;
          height: 60px;
          border-radius: 30px;
          border: 2px solid #fff;
          background-color: #f0f0f0;
        }
      }
      
      .user-detail {
        flex: 1;
        
        .user-name {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin-bottom: 6px;
          display: block;
        }
        
        .user-phone {
          font-size: 14px;
          color: #666;
          display: block;
        }
      }
      
      .settings-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          font-size: 22px;
          color: #2c7873;
        }
      }
    }
  }
  
  .profile-container {
    padding: 20px;
    
    // 服务记录区域
    .service-section {
      background-color: #fff;
      border-radius: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 15px;
      margin-bottom: 20px;
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
      }
      
      .service-grid {
        display: flex;
        justify-content: space-between;
        
        .service-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 48%;
          padding: 15px 0;
          border-radius: 10px;
          background-color: #f8fbfb;
          
          .service-icon {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: #e8f4f2;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            
            .iconfont {
              font-size: 24px;
              color: #2c7873;
            }
          }
          
          .service-name {
            font-size: 14px;
            color: #333;
          }
          
          &:active {
            background-color: #f0f7f7;
            transform: scale(0.98);
          }
        }
      }
    }
    
    // 功能列表
    .feature-list {
      background-color: #fff;
      border-radius: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 15px;
      margin-bottom: 20px;
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
      }
      
      .feature-grid {
        .feature-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .feature-card {
            width: 48%;
            background-color: #f8fbfb;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            
            .card-icon {
              width: 40px;
              height: 40px;
              border-radius: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              
              .iconfont {
                font-size: 20px;
              }
            }
            
            .card-name {
              font-size: 14px;
              color: #333;
            }
            
            &:active {
              opacity: 0.8;
              transform: scale(0.98);
            }
          }
        }
      }
    }
    
    // 关于我们
    .about-section {
      background-color: #fff;
      border-radius: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 30px;
      
      .about-item {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .about-text {
          font-size: 15px;
          color: #333;
        }
        
        .item-arrow {
          font-size: 15px;
          color: #999;
        }
        
        &:active {
          background-color: #f8fbfb;
        }
      }
    }
    
    // 退出登录按钮
    .logout-btn {
      width: 100%;
      height: 46px;
      background-color: #fff;
      color: #ff6b6b;
      border-radius: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-top: 20px;
      border: none;
      font-weight: 500;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      
      &:active {
        background-color: #fff9f9;
        transform: scale(0.98);
      }
    }
  }
}
</style> 